<!--
 * @Author: zjj
 * @Date: 2019-12-25 11:27:36
 * @LastEditors  : zjj
 * @LastEditTime : 2019-12-27 11:14:40
 -->
<!--  -->
<template>
    <div class="lucky-number">
        <Nav title="我的号码">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="number-list">
            <template v-for="(item,index) in numbers">
                <div :key="index" class="number-item flex aligin-center">
                    <div class="number flex aligin-center flex-column justify-center">
                        <span>{{numberSplit(item.number)[0]}}</span>
                        <span v-if="numberSplit(item.number)[1]&&numberSplit(item.number)[1]!=numberSplit(item.number)[0]" class="line"></span>
                        <span v-if="numberSplit(item.number)[1]&&numberSplit(item.number)[1]!=numberSplit(item.number)[0]">{{numberSplit(item.number)[1]}}</span>
                    </div>
                    <div class="divline flex aligin-center justify-center">
                        <div class="line"></div>
                    </div>
                    <div class="info">
                        <div class="shop-name">{{item.name}}</div>
                        <div class="count color-red">X{{item.c}}</div>
                        <div class="color-gray">{{item.time}}</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import {my_numbers} from "../../api/api"
export default {
  components: { Nav },
  data() {
    return {
      numbers:[]
    };
  },
  computed: {},
  watch: {},
  methods: {
    numberSplit(number){
      return number.split("-")
    }
  },
  created() {},
  mounted() {
     my_numbers({key:this.$route.params.key}).then(({data:{result}})=>{
       this.numbers=result
     })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.lucky-number {
  height: 100%;
  .number-list {
    margin: 20px 0 0;
    height: calc(100% - 65px);
    overflow: auto;
    .number-item {
      margin: 0 15px 11px;
      height: 99px;
      border: 1px solid rgba(220, 220, 220, 1);
    }
    .number {
      flex-shrink: 0;
      font-size: 18px;
      color: #ea373f;
      width: 96px;
      height: 100%;
    }
    .line {
      margin: 10px 0;
      width: 2px;
      height: 10px;
      background: #ea373f;
    }
    .shop-name {
      width: 220px;
      font-size: 14px;
    }
    .count {
      margin: 16px 0;
      font-size: 12px;
    }
    .time {
      font-size: 11px;
      color: #707070;
    }
    .divline {
      background: #fff;
      position: relative;
      height: 100%;
      width: 20px;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      overflow: hidden;
      &::before {
        position: absolute;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 1px solid rgba(220, 220, 220, 1);
        box-sizing: border-box;
        content: "";
        left: 0;
        top: 0;
        transform: translateY(-50%);
        z-index: 300;
      }
      &::after {
        position: absolute;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 1px solid rgba(220, 220, 220, 1);
        content: "";
        right: 0;
        bottom: 0;
        transform: translateY(50%);
        z-index: 300;
      }
      .line {
        width: 0;
        height: 73px;
        border: 1px dashed #EA662C;
        opacity:0.42;
      }
    }
  }
}
</style>